<template>
  <el-form class="el-form" :model="form" label-width="120px" disabled>
    <el-form-item>
      <div class="block">
        <el-avatar shape="square" :size="50" :src="form.headimgurl"></el-avatar>
      </div>
    </el-form-item>

    <el-form-item label="姓名：">
      <el-input v-model="form.name"></el-input>
    </el-form-item>

    <el-form-item label="年龄：">
      <el-input v-model="form.age"></el-input>
    </el-form-item>

    <el-form-item label="班级：">
      <el-input v-model="form.class"></el-input>
    </el-form-item>

    <el-form-item label="学历：">
      <el-input v-model="form.degree"></el-input>
    </el-form-item>

    <el-form-item label="简介：">
      <el-input v-model="form.description"></el-input>
    </el-form-item>

    <el-form-item label="项目地址：">
      <el-input v-model="form.productUrl"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
import { getUserInfo } from "@/api";
export default {
  data() {
    return {
      form: {},
    };
  },
  mounted() {
    let sid = this.$route.query.sId;
    let option = {
      page: "",
      count: "",
      classes: "",
    };
    getUserInfo(option).then((res) => {
      let data = res.data.data;
      data.forEach((item) => {
        if (item.sId === sid) {
          this.form = item;
        }
      });

      console.log(this.form);
    });
  },
};
</script>

<style scoped>
.el-form {
  width: 80%;
  margin: auto;
}

.block {
  text-align: center;
}

>>> .el-avatar--square {
  width: 100px !important;
  height: 100px !important;
}

>>> .el-input.is-disabled .el-input__inner {
  text-align: center;
}
</style>
